<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=1000,user-scalable=no" >
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <title>课件</title>
	<script type="text/javascript" src="../lib/js/vue.js" ></script>
  <link rel="stylesheet" href="../lib/css/common.css"/>
	<link rel="stylesheet" href="../lib/css/swiper.min.css"/>
  <link rel="stylesheet" href="../lib/css/css.css"/>
</head>
<body>
<div id="mainBody" class="main_body" v-cloak>
	<!-- S 头部 -->
	<common-head></common-head>
	<!-- E 头部 -->
	
	<div class="progress_box" :style="{width:progressWidth+'%'}" ></div>
	
	<div class="course_box">
		<div class="course_main">
			<div class="course_main_title main_color ov">
				<div class="fl">{{title}}</div>
				<a href="index.html"><button class="sub_btn fr" >重新选择</button></a>
			</div>
			<div class="course_name_list" v-if="dataInfo">
				<ul class="scroll">
					<li class="middle" :class="{'active':currBar.index == index}" v-for="(item,index) in dataInfo.list " @click="clickBaritem(item,index)" :key="index">
						{{(index+1)+'、'+item.name}}
					</li>
				</ul>
			</div>
			<div class="course_main_info" v-if="dataInfo">
				<!-- S  图文 -->
				<div class="course_order_graphic pr" v-if="currBar.type=='article'">
					<img class="course_btn" v-show="!articleAutoPlay" @click="clickArticlePlay" title="自动滚动" src="../lib/images/play_icon.png" >
					<img class="course_btn" v-show="articleAutoPlay" @click="clickArticlePause" title="暂停滚动" src="../lib/images/pause_icon.png" >
					<div class="course_main_graphic scroll" >
						<div class="course_graphic_box" v-html="currBar.content"></div>
					</div>
				</div>
				<!-- E  图文 -->
				<!-- S 视频 -->
				<div class="course_order_graphic pr" v-if="currBar.type=='video'">
					<div class="video_title_box ov">
						<ul class="video_speed fr">
							<li title="0.5倍速度" :class="{'active':playbackRate=='0.5'}" @click="clickPlaybackRate('0.5')" >0.5倍</li>
							<li title="1倍速度" :class="{'active':playbackRate=='1'}" @click="clickPlaybackRate('1')">1倍</li>
							<li title="1.5倍速度" :class="{'active':playbackRate=='1.5'}" @click="clickPlaybackRate('1.5')">1.5倍</li>
							<li title="2倍速度" :class="{'active':playbackRate=='2'}" @click="clickPlaybackRate('2')">2倍</li>
						</ul>
						<div class="video_title ellipsis">{{currBar.name}}</div>
					</div>
					<video class="video_main" id="videoMain" x5-video-player-type="h5-page" x-webkit-airplay="allow" t7-video-player-type="inline" webkit-playsinline="true" controls="controls"  playsinline="true" x-webkit-airplay="true" preload="auto" poster="../lib/images/base_img.jpg" >
						<source :src="currBar.content[0].src" ></source>
					</video>
				</div>
				<!-- E 视频 -->
				<!-- S 幻灯片 -->
				<div class="course_order_graphic pr" v-if="currBar.type=='silde'">
					<audio class="audio_main" v-show="false" id="swiperAudio" controls="controls">
						当前浏览器不支持audio
					</audio>
					<div class="swiper-container course_swiper_box" >
						<div class="swiper-wrapper">
					    <div class="swiper-slide" v-for="(item,index) in currBar.content" :key="index">
								<div class="course_list">
									<div class="" v-if="item.audiosrc && item.audiosrc != ''">
										<img class="course_btn" v-show="!swiperAudioIsplay" title="播放音频" @click="clickPlaySwiper(item.audiosrc)" src="../lib/images/play_icon.png" >
										<img class="course_btn" v-show="swiperAudioIsplay"  @click="cliclPauseSwiper()" title="暂停音频" src="../lib/images/pause_icon.png" >
									</div>
									
									<img class="course_list_img" :src="item.src" >
									<div class="course_list_name ellipsis">{{currBar.name}}</div>
								</div>
							</div>
						</div>
						<div class="swiper-pagination course_pagination_main"></div>
						<div class="swiper-button-next course_pagination_next"></div>
						<div class="swiper-button-prev course_pagination_prev"></div>
					</div>
				</div>
				<!-- E 幻灯片 -->
				<!-- S 音频加图片 -->
				<div class="course_order_graphic pr" v-if="currBar.type=='audio'">
					<audio class="audio_main" id="audioMain" controls="controls"  :src="currBar.content.src" >
						当前浏览器不支持audio
					</audio>
					<img class="course_list_img" :src="currBar.content.images[imgIndex].src" >
					<div class="course_list_name ellipsis">{{currBar.name}}</div>
				</div>
				<!-- E 音频加图片 -->
			</div>
		</div>
	</div>
	
	<!-- S 小节详情 -->
	<div class="win_box" v-show="showBar" v-if="dataInfo" >
		<div class="bar_box" style="padding-top: 20px;width: 900px;">
			<div class="main_color text_center f22">{{title}}</div>
			<div class="ov mt20" style="height: 80%;">
				<div class="ov bar_conent_left scroll">
					<div class="f16 bold">内容大纲</div>
					<div class="bar_conent_left_item ellipsis f16" v-for="(item,index) in dataInfo.list" :key="index">{{(index+1)+'、'+item.name}}</div>
				</div>
				<div class="bar_conent_right scroll">
					<div class="f16 bold">本节课程大纲</div>
					<div class="mt20" v-html="dataInfo.outline" ></div>
					<div class="f16 bold mt30">本节重点知识</div>
					<div class="mt20" v-html="dataInfo.knowledge" ></div>
					<div class="f16 bold">本节复习重点</div>
					<div class="mt20" v-html="dataInfo.reviewpoints" ></div>
				</div>
			</div>
			<div class="ov mt20">
				<div class="fl main_color">
					如需要记录学生作品，请教师使用微信进行扫码，进入相关操作平台</br>
					[数据提交后可保存两天，请提醒家长及时保存]
				</div>
				<div class="fr ov">
					<button class="sub_btn fl ml20" @click="showBar = false" >开始上课</button>
					<a href="./index.html"><button class="sub_btn fl ml20" style="width: 120px;" >返回章节选择</button></a>
				</div>
			</div>
		</div>
	</div>
	<!-- E 小节详情 -->
	
</div>

<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript" src="../lib/js/swiper.min.js"></script>
<script type="text/javascript" src="../lib/layer/layer.js"></script>
<script type="text/javascript" src="../lib/js/login.js" ></script>
<script type="text/javascript" src="../lib/js/js.js" ></script>
<script type="text/javascript" src="../lib/js/head.js" ></script>
<script type="text/javascript" src="../lib/js/preloadjs.js"></script>
<script type="text/javascript" >

var vm = new Vue({
	el: '#mainBody',
	data(){
		return{
			title:"",
			showBar:false,//显示小节内容
			category_id:'',
			dataInfo:null,
			currBar:{},//当前选中的内容
			videoObj:null,//视频对象
			audioObj:null,//音频对象
			imgIndex:0,//音频加图文时用于展示图片的索引
			swiperBanner:null,//幻灯片
			swiperAudio:null,//幻灯片音频对象
			swiperAudioIsplay:false,
			playbackRate:1,//视频播放速度,
			articleAutoPlay:null,//图文是否播放
			preload:null,//预加载资源
			progressWidth:0,//加载进度
		}
	},
	mounted(){
		this.title = getQueryString('name') || ''
		this.category_id = getQueryString('category_id') || ''
		if(this.category_id && this.category_id != ''){
			this.getBarInfo()
		}
	},
	methods: {
		//获取小节信息
		getBarInfo(){
			layer.load(0, {
				shade:[0.2,'#fff'],
			});
			$request({
				url:'/index.php?s=/api/lesson/content/wxapp_id/10001',
				method:'post',
				data:{
					category_id:this.category_id
				},
				success:(res)=>{
					layer.closeAll('loading');
					this.dataInfo = res.data.content || null;
					this.showBar = true;
					//设置默认
					this.clickBaritem(this.dataInfo.list[0],0);
					//开始预加载资源
					this.startPreload();
				}
			})
		},
		//点击小节列表
		clickBaritem(item,index){
			this.currBar = item;
			this.currBar.index = index;
			this.initConent();
		},
		
		//初始化小节内容
		initConent(){
			this.videoObj=null;//视频对象			
			this.audioObj=null;//音频对象
			this.imgIndex = 0;
			this.swiperBanner = null;//幻灯片
			this.swiperAudio = null;//幻灯片音频对象
			this.swiperAudioIsplay = false;//幻灯片音频是否播放
			this.playbackRate=1;//视频播放速度;
			if(this.articleAutoPlay){
				clearInterval(this.articleAutoPlay);
				this.articleAutoPlay=null;//图文是否播放
			}
			this.$nextTick(()=>{
				if(this.currBar.type=='video'){
					this.videoObj = document.getElementById('videoMain')
				}else if(this.currBar.type=='silde'){
					this.swiperAudio = document.getElementById('swiperAudio');
					if(this.currBar.content[0].audiosrc && this.currBar.content[0].audiosrc != ''){
						this.swiperAudio.src = this.currBar.content[0].audiosrc;
					};
					this.initSwiper();
				}else if(this.currBar.type=='audio'){
					this.imgIndex = 0;
					this.audioObj = document.getElementById('audioMain');
					this.getAudioDate();
				}
			})
		},
		//图文自动滚动
		clickArticlePlay(){
			this.articleAutoPlay = setInterval(()=>{
				let newTop =  $('.course_main_graphic').scrollTop();
				if(($('.course_main_graphic').height()+newTop)>=$('.course_graphic_box').height()){
					if(this.articleAutoPlay){
						clearInterval(this.articleAutoPlay);
						this.articleAutoPlay=null;//图文是否播放
					}
				}else{
					$('.course_main_graphic').animate({scrollTop:newTop + 20},500,'linear');
				}
			},500)
		},
		//图文暂停滚动
		clickArticlePause(){
			if(this.articleAutoPlay){
				clearInterval(this.articleAutoPlay);
				this.articleAutoPlay=null;//图文是否播放
			}
		},
		//幻灯片播放音频
		clickPlaySwiper(src){
			this.swiperAudio.play();
			this.swiperAudioIsplay = true;
		},
		//幻灯片暂停音频
		cliclPauseSwiper(){
			this.swiperAudio.pause();
			this.swiperAudioIsplay = false;
		},
		//获取音频播放进度
		getAudioDate(){
			this.audioObj.addEventListener('timeupdate',()=>{
				if(!this.audioObj){
					return
				}
				let time = this.audioObj.currentTime;
				let imgIndex = '';
				for(let i = 0;i<this.currBar.content.images.length;i++){
					let imgItem = this.currBar.content.images[i];
					if(time<=imgItem.times){
						imgIndex = i;
						break;
					}
				};
				
				if(this.imgIndex != imgIndex){
					if(imgIndex == ''){
						this.imgIndex = this.currBar.content.images.length-1
					}else{
						this.imgIndex = imgIndex
					};
				};				
			})
		},
		//设置视频速度
		clickPlaybackRate(speed){
			this.playbackRate = speed;
			if(this.videoObj){
				this.videoObj.playbackRate = this.playbackRate;
			}
		},
		//初始化幻灯片
		initSwiper(){
			//幻灯片
			this.swiperBanner = new Swiper('.course_swiper_box', {
				pagination:'.course_pagination_main',
				nextButton: '.course_pagination_next',
				prevButton: '.course_pagination_prev',
				spaceBetween: 0,
				zoom: true,
				effect: 'cube',
				cube: {
					shadow: true,
					slideShadows: true,
					shadowOffset: 20,
					shadowScale: 0.94
				},
				slidesPerView: 1,
				paginationClickable: true,
				paginationBulletRender: (swiper, index, className)=> {
					return '<span class="pagination_span ' + className + '">' + (index + 1) + '</span>';
				},
				onSlideChangeEnd:(swiper)=>{
					if(this.swiperAudio){
						if(this.currBar.content[swiper.activeIndex].audiosrc && this.currBar.content[swiper.activeIndex].audiosrc != ''){
							this.swiperAudio.src = this.currBar.content[swiper.activeIndex].audiosrc;
						}
						this.swiperAudioIsplay = false;
						this.swiperAudio.pause();
					}
				}
			});
		},
		
		//开始预加载
		startPreload() {
			this.preload = new createjs.LoadQueue(true);
			//注意加载音频文件需要调用如下代码行
			this.preload.installPlugin(createjs.Sound);         
			this.preload.on("fileload", (event)=>{
				this.handleFileLoad(event)
			});
			this.preload.on("progress", (event)=>{
				this.handleFileProgress(event)
			});
			this.preload.on("complete", (event)=>{
				this.loadComplete(event)
			});
			this.preload.on("error", (event)=>{
				this.loadError(event)
			});
			this.preload.loadManifest(this.dataInfo.resources);
		},
		
		//处理单个文件加载
		handleFileLoad(event) {
		
		},
		 
		//处理加载错误
		loadError(evt) {
		  console.log("加载出错！",evt.text);
		},
		 
		//已加载完毕进度 
		handleFileProgress(event) {
		  console.log(this.preload.progress*100|0)  
			this.progressWidth = this.preload.progress*100|0;
		},
		
		//全度资源加载完毕
		loadComplete(event) {
		  layer.msg('资源已加载完成');
		},
	}
});
  
</script>
</body>
</html>